<script setup>
import { ref, onMounted } from 'vue'
import { getOwnPurchaseAPI, delPurchaseAPI, addPurchaseAPI } from '@/apis/purchase'

const purchaseLsit = ref([])
const getPurchaseList = async () => {
    const res = await getOwnPurchaseAPI()
    if (res.code === 2000) {
        purchaseLsit.value = res.data
    }
}

const del = async (id) => {
    const res = await delPurchaseAPI(id)
    if (res.code === 2000) {
        getPurchaseList()
        ElMessage({ type: 'success', message: '删除成功' })
    }
}

const dialogVisible = ref(false)
const empty = {
    name: '',
    amount: 0,
    unit: '',
    comment: '',
    origin: '',
    address: ''
}
const purchase = ref({
    name: '',
    amount: 0,
    unit: '',
    comment: '',
    origin: '',
    address: ''
})

const check = () => {
    if (purchase.value.name === '' || purchase.value.amount === 0 ||
        purchase.value.unit === '' || purchase.value.comment === '' ||
        purchase.value.origin === '' || purchase.value.address === ''
    ) {
        ElMessage({ type: 'warning', message: '请填写完整有效的信息' })
        return false
    }
    return true
}

const add = async () => {
    if (check()) {
        const res = await addPurchaseAPI({ ...purchase.value })
        if (res.code === 2000) {
            purchase.value = { ...empty }
            getPurchaseList()
            dialogVisible.value = false
            ElMessage({ type: 'success', message: '添加成功' })
        }
    }
}

onMounted(() => getPurchaseList())
</script>

<template>
<div class="purchase-page">
    <div class="page-title">采购管理</div>
    <a href="javascript:;" class="add-btn" @click="dialogVisible = true">发布采购</a>
    <div class="purchase-list">
        <div class="list-header">
            <div class="col-1">采购名称</div>
            <div class="col-2">采购数量</div>
            <div class="col-3">采购说明</div>
            <div class="col-4">期望来源地</div>
            <div class="col-6">发布时间</div>
            <div class="col-7">操作</div>
        </div>
        <a href="javascript:;" class="list-item" v-for="i in purchaseLsit" :key="i.id">
            <div class="col col-1">{{ i.name }}</div>
            <div class="col col-2">{{ i.amount }}{{ i.unit }}</div>
            <div class="col col-3">{{ i.comment }}</div>
            <div class="col col-4">{{ i.origin }}</div>
            <div class="col col-6">{{ i.publishTime.split(' ')[0] }}</div>
            <div class="col col-7">
                <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="del(i.id)">
                    <template #reference>
                        <a href="javascript:;">删除</a>
                    </template>
                </el-popconfirm>
            </div>
        </a>
    </div>
</div>

<el-dialog
    v-model="dialogVisible"
    title="发布采购信息"
    width="30%">
    <div class="dialog-content">
        <div>
            <div class="content-label">名称：</div>
            <div class="content-ipt"><input type="text" v-model="purchase.name"></div>
        </div>
        <div>
            <div class="content-label">数量：</div>
            <div class="content-ipt"><input type="text" v-model="purchase.amount"></div>
        </div>
        <div>
            <div class="content-label">单位：</div>
            <div class="content-ipt"><input type="text" v-model="purchase.unit"></div>
        </div>
        <div>
            <div class="content-label">说明：</div>
            <div class="content-ipt"><input type="text" v-model="purchase.comment"></div>
        </div>
        <div>
            <div class="content-label">来源地：</div>
            <div class="content-ipt"><input type="text" v-model="purchase.origin"></div>
        </div>
        <div>
            <div class="content-label">地址：</div>
            <div class="content-ipt"><input type="text" v-model="purchase.address"></div>
        </div>
    </div>
    <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="add">确定</el-button>
        </span>
    </template>
</el-dialog>
</template>

<style scoped lang='scss'>
.purchase-page {
    width: 100%;
    height: 100%;
    padding: 20px 40px;
    background-color: #fff;
}

.page-title {
    font-size: 21px;
    padding: 15px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
}

.add-btn {
    display: block;
    width: 90px;
    height: 35px;
    line-height: 35px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    background-color: #39bf3e;
    text-align: center;
    margin: 20px 0;
}

.purchase-list {
    width: 100%;
    min-height: 400px;
    margin-top: 30px;
    border-bottom: 1px solid #f4f4f4;

    .list-header {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        user-select: none;
        border-bottom: 1px solid #f4f4f4;

        >div {
            font-size: 14px;
            font-weight: bold;
        }
    }

    .list-item {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        margin: 15px 0;

        &:hover {
            background: #fbfbfb;

            .col-7>a {
                color: #fff;
                background-color: #39bf3e;
            }
        }
    }

    .col {
        height: 25px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .col-1 {
        width: 120px;
    }
    .col-2 {
        width: 100px;
    }
    .col-3 {
        width: 240px;
    }
    .col-4 {
        width: 180px;
    }
    .col-5 {
        width: 120px;
    }
    .col-6 {
        width: 120px;
    }
    .col-7 {
        text-align: center;
        width: 80px;

        a {
            display: block;
            font-size: 12px;
            color: #39bf3e;
            border: 1px solid #39bf3e;
            padding: 3px 10px;
            transition: all .2s;
        }
    }
}

.dialog-content {
    width: 100%;

    >div {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .content-label {
        width: 90px;
        color: #666;
        font-weight: bold;
    }

    .content-ipt {
        width: 300px;
        height: 35px;
        border: 1.5px solid #d8d8d8;
        border-radius: 5px;

        input {
            width: 100%;
            height: 100%;
            font-size: 16px;
            padding: 0 10px;
            border-radius: 5px;
        }
    }
}
</style>